import React from 'react';
import {connect} from 'dva';
import ReactDOM from 'react-dom';
import styles from './index.less';
import UserServices from '@/services/user';
import Constants from '@/utils/constants';
import { requestSuccess, getLabelOfValue } from '@/utils/tools';
import {
  NavBar,
  Icon,
  SegmentedControl,
  PullToRefresh,
  Button,
  Accordion,
  Picker,
  List,
  Calendar,
  Switch
} from 'antd-mobile';
import enUS from 'antd-mobile/lib/calendar/locale/en_US';

class CreatorPage extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      allCompanyMap: [],
      allFabSite: [],
      allTripWay: [{label: 'One-way', value: 'One-way'}, {label: 'Round-trip', value: 'Round-trip'}],
      allTripCountry: [{label: 'International', value: 'International'}, {label: 'Domestic', value: 'Domestic'}],
      values: {
        companyCode: '',
        fabSite: '',
        isOneWay: 'Round-trip',
        isOutboundTrip: 'Domestic'
      }
    }
  }

  onChange = (value, key)=>{
    this.setState({values: {
      ...this.state.values,
      [key]: value
    }});
  }

  handleGoDetail = () => {
    UserServices.saveApplication({
      ...this.state.values,
      isOneWay: this.state.values.isOneWay,
      isOutboundTrip: this.state.values.isOutboundTrip
    }).then(res => {
      if(requestSuccess(res)){
        // this.props.history.push(`/detail?id=${res.data.trsMast.id}&actionType=viewUpdateForm`);
        this.props.history.push({pathname: '/detail', search: `id=${res.data.trsMast.id}&actionType=viewUpdateForm`})
      }
    })
  }

  componentDidMount(){
    UserServices.getApplicationInfo().then(res => {
      if(requestSuccess(res)){
        console.log(res);
        this.setState({
          allCompanyMap: global._.map(res.data.allCompanyMap, (item, key) => {
            return {
              label: item,
              value: key
            }
          }),
          allFabSite: global._.map(res.data.allFabSite, (item, key) => {
            return {
              label: item,
              value: item
            }
          }),
          values: {
            ...this.state.values,
            companyCode: Object.keys(res.data.allCompanyMap)[0],
            fabSite: res.data.allFabSite[0]
          }
        })
      }
    })
  }

  render(){
    const now = new Date();

    return (
      <div className={styles.creator}>
        {
          !Constants.hasCordova
          ?
        <NavBar
          mode='dark'
          icon={< Icon type = 'left' />}
          onLeftClick={() => console.log('onLeftClick')}
          rightContent={[< Icon key = '1' type = 'ellipsis' />]}>
          Travel Request System
        </NavBar>
        :
        null
      }
        <div className={styles.baseInfos}>
          <div className={styles.info}>
            <div className={styles.title}>New Application</div>
            <div className={styles.list}>
              <Picker data={this.state.allCompanyMap} cols={1} onChange={(values) => this.onChange(values[0], 'companyCode')}>
                <div className={styles.item}>
                  <div className={styles.des}>Company</div>
                  <div className={styles.value}>{getLabelOfValue(this.state.values.companyCode, this.state.allCompanyMap) || 'Select'}</div>
                </div>
              </Picker>
              <Picker data={this.state.allFabSite} cols={1} onChange={(values) => this.onChange(values[0], 'fabSite')}>
                <div className={styles.item}>
                  <div className={styles.des}>Handling Site</div>
                  <div className={styles.value}>{this.state.values.fabSite || 'Select'}</div>
                </div>
              </Picker>
              <Picker data={this.state.allTripWay} cols={1} onChange={(values) => this.onChange(values[0], 'isOneWay')}>
                <div className={styles.item}>
                  <div className={styles.des}>One-way Trip</div>
                  <div className={styles.value}>
                    {this.state.values.isOneWay}
                  </div>
                </div>
              </Picker>
              <Picker data={this.state.allTripCountry} cols={1} onChange={(values) => this.onChange(values[0], 'isOutboundTrip')}>
                <div className={styles.item}>
                  <div className={styles.des}>Out-of-Country</div>
                  <div className={styles.value}>
                    {this.state.values.isOutboundTrip}
                  </div>
                </div>
              </Picker>
            </div>
          </div>
        </div>
        <div className={styles.footerBtn} onClick={this.handleGoDetail}>
          Next
        </div>
      </div>
    )
  }
}


CreatorPage.propTypes = {};

function mapStateToProps(state) {
  return {

  }
}
export default connect(mapStateToProps)(CreatorPage);
